<template>
  <div class="h-p100 w-p100">
    <div class="box box-ver w-p100 h-p100">
      <div @click="$router.replace('/')"  class="header box box-ac">
        <div class="icon icon-back"></div>
        <div class="box-f1 tx-c">注册</div>
      </div>
      <div class="box box-ac box-ver box-f1 of-y-s">
        <input v-model="user.email" class="email ipt" placeholder="请输入邮箱"  type="text">
        <input v-model="user.nickname" class="nickname ipt" placeholder="请输入昵称"  type="text">
        <input v-model="user.password" class="password ipt" placeholder="请输入密码" type="password">
        <div class="box box-ac ipt">
          <input v-model="user.registerCode" class="box-f1 code" placeholder="验证码" type="text">
          <div @click="checkTimer()" class="button">{{codeBtnTxt}}</div>
        </div>
        <div @click="register" class="submit ipt">注册</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data () {
    return {
      user: {
        nickname: '',
        email: '',
        password: '',
        registerCode: ''
      },
      codeBtnTxt: '获取验证码',
      codeStatus: 1
    }
  },
  mounted () {

  },
  methods: {
    checkTimer () {
      let { email } = this.user
      if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
        return this.$tools.openToast({
          msg: '邮箱格式错误',
          duration: 1500
        })
      }
      if (this.codeStatus === 2) return
      this.getRegisterCode()
      this.codeStatus = 2
      let timeStart = 60
      let timer = setInterval(() => {
        timeStart--
        if (timeStart <= 0) {
          clearInterval(timer)
          this.codeBtnTxt = '获取验证码'
          this.codeStatus = 1
        } else {
          this.codeBtnTxt = timeStart + 'S'
        }
      }, 1000)
    },
    getRegisterCode () {
      let { email } = this.user
      this.$http({
        method: 'post',
        url: `${this.$config.apiBase}/api/v0/user/registerCode`,
        data: {
          email
        }
      }).then(res => {

      })
    },
    register () {
      let { email, nickname, password, registerCode } = this.user
      if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
        return this.$tools.openToast({
          msg: '邮箱格式错误',
          duration: 1500
        })
      }
      if (!/^[0-9a-zA-Z\u4e00-\u9fa5_]{3,12}$/.test(nickname)) {
        return this.$tools.openToast({
          msg: '昵称由3-12个字母，数字，下划线组成',
          duration: 1500
        })
      }
      if (!/^(\w){6,20}$/.test(password)) {
        return this.$tools.openToast({
          msg: '密码由6-20个字母，数字，下划线组成',
          duration: 1500
        })
      }
      if (!/^(\w){6,20}$/.test(password)) {
        return this.$tools.openToast({
          msg: '密码由6-20个字母，数字，下划线组成',
          duration: 1500
        })
      }
      if (!registerCode) {
        return this.$tools.openToast({
          msg: '请填写验证码',
          duration: 1500
        })
      }
      this.$http({
        method: 'post',
        url: `${this.$config.apiBase}/api/v0/user/register`,
        data: {
          nickname,
          email,
          password,
          registerCode
        }
      }).then(res => {
        this.$store.commit('userInfo', this.user)
        this.$router.replace({
          path: '/login',
          query: { autoLogin: 1 }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config.scss';
.ipt, .submit{
  width:5rem;
  height:.75rem;
  border-radius: .75rem;
  font-size:.36rem;
  text-align: center;
  margin-bottom:.3rem;
  background-color:#FFF;
  border:1px solid $themeColor;
  outline: none;
  color:#666;
  overflow: hidden;
  &.email{
    margin-top:3.6rem;
  }
  &.submit{
    color:#FFF;
    background-color:$themeColor;
    line-height:.75rem;
    margin-top:.5rem;
  }
  .code{
    display:block;
    width:1.5rem;
    margin: 0 .5rem;
    border:none;
    outline: none;
  }
  .button{
    color:#FFF;
    background-color:$themeColor;
    height:.75rem;
    line-height:.75rem;
    width:2.45rem;
    text-align:center;
  }
}
</style>
